<template>
  <div class="product-container">
    <h1 class="title">产品系列</h1>

    <div class="line">
      <p class="breadcrumb">您所在的位置：首页>产品系列</p>
      <el-button v-show="userRole" class="add-button" type="primary" @click="getAddProduct">
        <el-icon><edit /></el-icon>
        <span class="button-text">发布产品</span>
      </el-button>
    </div>
    <!-- 产品系列内容 -->
    <div class="product-list">
      <div
        v-for="product in products"
        :key="product.pro_id"
        class="product-item animate__animated animate__backInDown"
        @mouseenter="onProductHover(product)"
      >
        <img
          :src="product.pro_filename"
          class="product-image"
          :alt="product.pro_name"
        />
        <p class="product-detail">{{ product.pro_detail }}</p>
        <h2 class="product-name">{{ product.pro_name }}</h2>
        <p class="product-price">价格：{{ product.pro_price }}</p>
        <p class="product-time">发布时间：{{ formatDate(product.pro_time) }}</p>
      </div>
    </div>
  </div>
</template>

<script>
import "animate.css";
import axios from "axios";
import { ElMessage } from "element-plus";
import { Edit } from '@element-plus/icons-vue';

export default {
  components: {
    Edit
  },
  data() {
    return {
      products: [],
      userRole: ''
    };
  },
  methods: {
    onProductHover(product) {
      console.log('悬停产品', product)
    },
    async getProductSeies() {
      try {
        const response = await axios.get(
          "http://47.108.80.35:6060/company_req_product/get_product"
        );
        console.log(response);
        if (response.data.code === 200) {
          this.products = response.data.data;
          console.log(this.products);
        }
      } catch (error) {
        console.error(error);
      }
    },
    getAddProduct() {
      let userInfo = JSON.parse(localStorage.getItem("userInfo"));
      console.log('用户信息', userInfo)
      if (userInfo.role == 1) {
        this.$router.push('/dscompany/productForm')
      } else {
        ElMessage.error('您不是企业用户，无法发布产品')
      }
    },
    getUserRole() {
      console.log("方法开始")
      if (localStorage.getItem("userInfo") == null) { //未登录情况
        this.userRole = false;
        console.log('用户角色', this.userRole)
      } else {
        let role = JSON.parse(localStorage.getItem("userInfo")).role;
        if (role == 1) {
          this.userRole = true;
        } else {
          this.userRole = false;
        }
        console.log('用户角色', this.userRole)
      }
    },
    formatDate(dateString) {
      const date = new Date(dateString);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    }
  },
  created() {
    this.getProductSeies();
    this.getUserRole();
  }
};
</script>

<style scoped>
.product-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 10px;
  box-sizing: border-box;
}

.title {
  font-size: 2rem;
  text-align: left;
  margin: 20px 0 10px 0;
  padding-left: 5%;
}

.line {
  height: 50px;
  background: linear-gradient(to right, white, 60%, rgb(217, 215, 215));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 5%;
  margin-bottom: 20px;
}

.breadcrumb {
  text-align: left;
  margin: 0;
  font-size: 0.9rem;
}

.add-button {
  margin-right: 0;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 5px;
}

.button-text {
  display: none;
}

.product-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  justify-content: center;
  padding: 10px 0;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
}

.product-item {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: relative;
  overflow: hidden;
  background: #fff;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.product-image {
  width: 100%;
  max-width: 150px;
  height: auto;
  border-radius: 8px;
  display: block;
  margin: 0 auto 15px auto;
}

.product-name {
  font-size: 1.3rem;
  margin: 10px 0;
  text-align: center;
  color: #333;
}

.product-detail {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 30px);
  padding: 12px;
  background-color: rgba(255, 255, 255, 0.95);
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  font-size: 0.9rem;
  text-align: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

.product-item:hover .product-detail {
  opacity: 1;
}

.product-price {
  font-size: 1rem;
  color: #333;
  margin: 10px 0;
  text-align: center;
  font-weight: 500;
}

.product-time {
  font-size: 0.85rem;
  color: #777;
  text-align: center;
}

/* 平板设备 */
@media (min-width: 768px) {
  .title {
    font-size: 2.5rem;
    margin: 30px 0 15px 0px;
  }
  
  .line {
    margin-bottom: 30px;
    padding: 0 60px;
  }
  
  .breadcrumb {
    font-size: 1rem;
  }
  
  .add-button {
    padding: 10px 15px;
  }
  
  .button-text {
    display: inline;
  }
  
  .product-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    padding: 20px 0;
  }
  
  .product-item {
    padding: 20px;
  }
  
  .product-name {
    font-size: 1.5rem;
  }
  
  .product-detail {
    font-size: 1rem;
  }
  
  .product-price {
    font-size: 1.1rem;
  }
  
  .product-time {
    font-size: 0.9rem;
  }
}

/* 桌面设备 */
@media (min-width: 1024px) {
  .product-container {
    padding: 0 20px;
  }
  
  .title {
    font-size: 3rem;
    margin: 40px 0 20px 0px;
  }
  
  .line {
    margin-bottom: 40px;
    padding: 0 60px;
  }
  
  .breadcrumb {
    font-size: 1.1rem;
  }
  
  .product-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 30px 60px;
  }
  
  .product-item {
    padding: 25px;
    max-width: 320px;
  }
  
  .product-name {
    font-size: 1.7rem;
  }
  
  .product-price {
    font-size: 1.2rem;
  }
  
  .product-time {
    font-size: 1rem;
  }
}

/* 大屏幕设备 */
@media (min-width: 1200px) {
  .title {
    font-size: 3.5rem;
  }
  
  .product-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 40px 60px;
  }
  
  .product-item {
    max-width: 350px;
  }
  
  .product-name {
    font-size: 1.8rem;
  }
}

/* 小屏幕优化 */
@media (max-width: 480px) {
  .title {
    font-size: 1.7rem;
    margin: 15px 0 10px 5%;
  }
  
  .line {
    height: auto;
    min-height: 50px;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 10px 5%;
  }
  
  .breadcrumb {
    font-size: 0.85rem;
    align-self: flex-start;
  }
  
  .add-button {
    align-self: flex-end;
    margin-right: 0;
    padding: 6px 10px;
  }
  
  .product-list {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 10px 5%;
  }
  
  .product-item {
    padding: 12px;
    max-width: 100%;
  }
  
  .product-name {
    font-size: 1.2rem;
  }
  
  .product-price {
    font-size: 0.95rem;
  }
  
  .product-time {
    font-size: 0.8rem;
  }
}
</style>